<script lang="ts" setup>
import {ref} from "vue"
import {adminProduct, deleteAdminProduct, productStatus} from "../serve"
import pagination from './base/pagination.vue'
import store from '../pina'
import {ElMessage, ElMessageBox} from "element-plus"
import {useRouter,useRoute} from 'vue-router'
const
    pina = store(),
    itemData: any = ref({list: []}),
    fromData = ref({
      page: 1,
      size: 5,
      keyword: ''
    }),
    listLoading = ref(false),
    selectable = (row: any) => ![1, 2].includes(row.id),
    deleteList = ref([]),
    router = useRouter(),
    route = useRoute()
;

function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}

function get() {
  listLoading.value = true
  adminProduct({...fromData.value}).then((r: any) => {
    itemData.value = r
    itemData.value['list'].forEach((e: any) => {
      e['sliderImage'] = JSON.parse(e['sliderImage'])
    })
  }).finally(() => listLoading.value = false)
}

get()

function updateShowChange(id: string) {
  productStatus(id).then(() => {
    ElMessage({
      message: '状态修改成功',
      type: 'success',
      duration: 3000
    })
    get()
  }).catch(() => {
    ElMessage({
      message: '状态修改失败',
      type: 'error',
      duration: 3000
    })
  })
}

function handleSelectionChange(e: any) {
  deleteList.value = []
  e.forEach((i: any) => deleteList.value.push(i['id']))
}

function deleteChange(id: string) {
  ElMessageBox.confirm('此操作将不可恢复, 是否继续?', '提示', {type: 'info'}).then(() => {
    listLoading.value = true
    deleteAdminProduct([id]).then(() => {
      ElMessage({
        message: '删除成功！',
        type: 'success',
        duration: 3000
      })
      get()
    }).catch(() => {
      listLoading.value = false
      ElMessage({
        message: '删除失败！',
        type: 'error',
        duration: 3000
      })
    })
  }).catch(() => true)
}

function deleteListChange() {
  listLoading.value = true
  ElMessageBox.confirm('此操作将不可恢复, 是否继续?', '提示', {type: 'info'}).then(() => {
    if (deleteList.value.length == 0) {
      ElMessage({type: 'error', message: '请选择要批量删除的信息'})
      listLoading.value = false
      return
    }
    deleteAdminProduct(deleteList.value).then(() => {
      ElMessage({
        message: '删除成功！',
        type: 'success',
        duration: 3000
      })
      get()
    }).catch(() => {
      listLoading.value = false
      ElMessage({
        message: '删除失败！',
        type: 'error',
        duration: 3000
      })
    })
  }).catch(() => listLoading.value = false)
}
function addChange() {
  const p = '/infoUpAndAdd',t = '鲜花信息添加';
  route['matched'][0]['children'].forEach((e:any)=>{
    if (e['path'] == p){
      e['meta'].title = t
    }
  })
  router.push(p).catch(()=>true)
}
function editChange(id:string) {
  const p = '/infoUpAndAdd',t = '鲜花信息编辑';
  route['matched'][0]['children'].forEach((e:any)=>{
    if (e['path'] == p){
      e['meta'].title = t
    }
  })
  router.push({path:p,query:{id}}).catch(()=>true)
}
</script>

<template>
  <el-scrollbar>
  <el-card>
    <div slot="header">
      <el-button icon="CirclePlusFilled" type="primary" @click="addChange">新增</el-button>
      <el-button icon="RemoveFilled" type="danger" @click="deleteListChange">批量删除</el-button>
      <el-input v-model="fromData['keyword']" placeholder="请输入关键字搜索" style="width: 300px;margin-left: 50px;">
        <template #append>
          <el-button icon="Search" @click="get"/>
        </template>
      </el-input>
    </div>
  </el-card>
  <el-card>
    <el-table v-loading="listLoading" :data="itemData['list']"
              :header-cell-style="{ fontWeight: 'bold' }"
              :highlight-current-row="true" element-loading-text="加载中..." size="small"
              @selection-change="handleSelectionChange">
      <el-table-column :selectable="selectable" type="selection" width="55"/>
      <el-table-column align="center" label="id" min-width="100" prop="id"/>
      <el-table-column align="center" label="鲜花名称" min-width="100" prop="storeName" show-overflow-tooltip/>
      <el-table-column align="center" label="鲜花描述" prop="storeInfo" width="200"/>
      <el-table-column align="center" label="图片" min-width="80">
        <template #default="scope">
          <el-image v-show="!!scope.row.image" :hide-on-click-modal="true"
                    :preview-src-list="[scope.row?.image]" :src="scope.row.image" fit="cover" preview-teleported
                    style="width: 60px; height: 60px;border-radius: 5px;"/>
          <el-image v-show="!scope.row?.image" fit="cover"
                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                    style="width: 60px; height: 60px;border-radius: 5px;"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="鲜花售价" min-width="80" prop="price"/>
      <el-table-column align="center" label="状态" width="120">
        <template #default="scope">
          <el-switch :model-value="scope['row']['isShow'] == 1"
                     class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999999"
                     @change="updateShowChange(scope['row']['id'])"/>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="150">
        <template #default="s">
          <el-button circle icon="Edit" type="primary" @click="editChange(s['row']['id'])" />
          <el-button circle icon="Delete" type="danger" @click="deleteChange(s['row']['id'])"/>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                  :small="pina.app.browser.isMini" :total="itemData?.total"
                  class="page" @size-change="sizeChange" @current-change="currentChange"/>
    </div>
  </el-card>

  </el-scrollbar>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>